<template>
    <div class="overdueList">
        <v-header name="逾期合同" @actionClick="actionClick"></v-header>
        <div class="headAction" v-if="typeOpen">
            <div class="menuShade" @click=" headMenuBlur"></div>
            <ul>
                <li v-for="(item, index) in searchTypes" @click="setYqType(item,index)"
                    v-bind:class="{active: activeHeaderMenu == index}">{{item}}
                </li>
            </ul>
        </div>
        <div class='searchParams c-search'>
            <div class='accountmes'>
                <span>客户姓名</span>
                <input type="text" v-model='searchParm.name'>
            </div>
            <div class='accountmes'>
                <span>手机号码</span>
                <input type="text" v-model='searchParm.phone'>
            </div>
            <div class='accountmes iconCell'>
                <span style='white-space:pre;'>城      市</span>
                <div @click="cityVisible=true">
                    <input type="text" v-model="cityName" disabled id="demo">
                </div>
                <div class="iconfont">
                    <i class="icon-close" v-if="searchParm.city" @click="clearStatus"></i>
                    <i class="icon-xiala" @click="cityVisible=true"></i>
                </div>
            </div>
            <div class='accountmes'>
                <span>门店名称</span>
                <input type="text">
            </div>
            <div class='searchBtn' @click='submit'>查询</div>
        </div>
        <div class="line"></div>
        <div>
            <noData v-on:search="showForm" v-if="no_data"></noData>
            <scroller class='contractList' v-if="!no_data" v-on:load="loadmore" v-on:refresh="refresh" ref="scroller">
                <template v-for="(list,index) in overdueList">
                    <div class="line"></div>
                    <ul class="contractInfo">
                        <li>
                            <router-link tag="p" class="contract" :to="'/overdue/overdueDetail/'+list.contract_no">
                                <span class="color1">合同编号</span> {{list.contract_no}}
                                <img class="chevron-right" src="../icon/next.png"/>
                            </router-link>
                        </li>
                        <li>
                            <div class="sleft">
                                <span class='key'>{{list.id_card_name}}</span>
                                <span class='value'>{{list.mobile}}</span>
                            </div>
                            <div class="sright">
                                <span class='radioBtn status'>{{list.status}}</span>
                                <a class="radioBtn call" v-bind:href="'tel:'+list.mobile">拨打</a>
                            </div>
                        </li>
                        <li>
                            <div class="sleft">
                                <span class='key'>借款金额</span>
                                <span class='value'>{{list.loan_money}}元</span>
                                <span class='rightspan'>{{list.periods}}/期</span>
                            </div>
                            <div class="sright">
                                <span class='key'>日期</span>
                                <span class='value'>{{list.create_time|unixTime(false)}}</span>
                            </div>
                        </li>
                        <li>
                            <div class="sleft">
                                <span class='key'>身份证</span>
                                <span class='value'>{{list.id_card_no}}</span>
                            </div>
                            <div class="sright">
                                <span class='key'>项目</span>
                                <span>{{list.product_name}}</span>
                            </div>
                        </li>
                        <li>
                            <div class="sleft">
                                <span class='key'>办理销售</span>
                                <span class='value'>{{list.user_name}}</span>
                            </div>
                            <div class="sright">
                                <span class="key">逾期天数</span>
                                <span class="value red">{{list.yq_day}}天</span>
                            </div>
                        </li>
                        <li>
                            <div class="">
                                <span class="key">门店名称</span>
                                <span class='value'>{{list.store_name}} </span>
                            </div>
                        </li>
                        <li>

                        </li>
                    </ul>
                </template>
            </scroller>
            <cityPicker :visible="cityVisible" @cityToggle="cityToggle" @confirm="cityConfirm"></cityPicker>
        </div>
    </div>
</template>
<script>
    import Config from '../api/config';
    import {mapState} from "vuex";
    import scroller from "./scoller"
    import noData from "./noData"
    import header from "./header"
    import cityPicker from './cityPicker/cityPicker'
    import {dateFormat} from '../util/methods'
    export default{
        data () {
            return {
                cityVisible: false,
                cityName: '',
                pickerValue: dateFormat(new Date(), "yyyy-MM-dd"),
                typeToggle: false,
                no_data: false,
                typeOpen: false,
                searchTypes: {
                    '1': '7天内',
                    '2': '30天内以上'
                },
                activeHeaderMenu: null,
            }
        },
        components: {
            noData,
            scroller,
            "v-header": header,
            cityPicker,
        },
        mounted(){

        },
        computed: {
            ...mapState({
                overdueList: state => state.overdue.overdueList,
                searchParm: state => state.overdue.param
            })
        },
        methods: {
            refresh(e){
                this.$store.commit({type: 'setOverdueParams', params: {"param$page": 1}})
                this.request()
            },
            loadmore(e){
                this.$store.commit({type: 'setOverdueParams', params: {"param$page": this.searchParm.page + 1}})
                this.request(false, true)
            },
            submit(showNodata = false, append = false){
                this.$store.commit({type: 'setOverdueParams', params: {"param$page": 1}})
                this.request(true, false)
            },
            request(showNodata = false, append = false){
                var self = this
                this.$store.dispatch({
                    type: 'overdueList',
                    append: append
                }).then(function (res) {
                    if (!res.data.length) {
                        self.$refs.scroller.isNoData()
                    }
                    if (typeof(self.$refs.scroller) !== 'undefined') {
                        self.$refs.scroller.removeLoading()
                    }
                    self.no_data = !res.data.length && showNodata ? true : false
                })
            },
            setYqType(typeName, index){
                this.typeOpen = !this.typeOpen
                if (this.activeHeaderMenu != null) {
                    this.activeHeaderMenu = (this.activeHeaderMenu == index ) ? null : index
                } else {
                    this.activeHeaderMenu = index
                }
                this.$store.commit({
                    type: 'setOverdueParams',
                    params: {"param$yqType": this.activeHeaderMenu, "param$page": 1}
                })
                this.request();

            },
            actionClick(){
                this.typeOpen = !this.typeOpen
            },
            cityConfirm(select){
                if (select.city.key && select.proivnce.key) {
                    this.cityName = select.proivnce.key + "-" + select.city.key;
                    this.$store.commit({type: 'setOverdueParams', params: {'param$city': select.city.value}})
                }
            },
            cityToggle(value){
                this.cityVisible = value;
            },
            showForm(){
                this.fSearch = !this.fSearch
                window.scrollTo(0, 0);
            },
            clearStatus(){
                this.cityName = ""
                this.$store.commit({type: 'setOverdueParams', params: {'param$city': ''}})
            },
            headMenuBlur(){
                this.typeOpen = false
            }
        }
    }
</script>